<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1064 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path fill="#DA0042" d="M4.772 629.76a271.36 271.36 0 1 0 542.72 0 271.36 271.36 0 1 0-542.72 0Z"/><path fill="#004288" d="M502.436 287.744h72.192V724.48h-72.192V287.744zm121.344 91.648h72.192v253.44H623.78v-253.44zm-243.2 0h72.192v253.44H380.58v-253.44zm365.056 74.752h72.192v101.888h-72.192V454.144zm-486.4 0h72.192v101.888h-72.192V454.144zM459.428 829.44c-1.024 3.584-6.656 23.552-11.264 39.424-156.672-38.4-271.36-169.984-285.696-329.216l-.512-4.608H96.42l.512 5.632c7.168 93.696 44.032 180.736 106.496 252.416 60.416 69.12 138.752 117.248 227.328 139.264l-12.288 47.616 121.856-53.76-80.896-112.128v15.36zM961.7 498.688l-107.52 78.336 48.128 12.288c-38.4 156.672-169.984 271.36-329.216 285.696l-4.608.512v65.536l5.632-.512c94.208-6.144 182.272-42.496 253.952-104.448 68.608-58.88 117.76-139.776 139.264-227.328l48.128 12.288-53.76-122.368zM220.324 427.52l-48.128-12.288c38.4-156.672 169.984-271.36 329.216-285.696l4.608-.512V60.928l-5.632.512c-189.44 16.896-346.112 150.528-391.68 333.824l-50.176-11.776 53.76 122.368 108.032-78.336zm408.064-290.816c156.672 38.4 271.36 169.984 285.696 329.216l.512 4.608h65.536l-.512-5.632C972.452 371.2 935.588 284.16 873.124 212.48 812.708 143.36 734.372 95.232 645.796 73.216l11.776-50.176-121.344 54.272 77.824 107.008 14.336-47.616z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Group626404 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
